<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="X-UA-Compatible" content="E=edge;chrome=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/reset.css">
	    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/weui.min.css">
	    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/index.css">
	    <script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="<%=path%>/static/js/weui.min.js"></script>
        <script type="text/javascript" src="<%=path%>/static/js/city-data.js"></script>
        <script type="text/javascript" src="<%=path%>/static/js/chooseCity.js"></script>
        <script type="text/javascript" src="<%=path%>/static/js/index.js"></script>
        <script type="text/javascript" src="<%=path%>/static/layer/layer.js"></script>
    </head>
   <body>
   <div class="registered">
        <div class="header">
            <div><div class="back"></div></div>
            <div>会员注册</div>
            <div></div>
        </div>
        <div class="main">
            <div class="banner-wrap">
                <img src="<%=path%>/static/img/member/logo.png" alt="logo">
            </div>
            <div class="registered-form">
                <form >
                    <ul class="registered-form-wrap">
                        <li class="li-border">
                            <label><div class="name-icon left icon"></div><input  pl="请输入姓名"  class="left user-name content"></label>
                        </li>
                        <li>
                            <label><div class="id-icon left icon"></div><input pl="请输入身份证号码" class="left user-card content"></label>
                        </li>
                    </ul>
                    <ul class="registered-form-wrap ul-margin">
                        <li class="li-border">
                            <label><div class="phone-icon left icon"></div><input pl="请输入手机" class="left content user-number"></label>
                        </li>
                        <li class="three-line li-border">
                            <label><div class="code-icon left icon"></div><input pl="请输入验证码" class="left content user-yan"></label>
                            <div class="right verification-code right-code"><img id="imgObj" src="<%=path%>/validate/validateCode" onclick="changeImg()"/></div>
                        </li>
                        <li class="three-line li-border">
                            <label ><div class="sms-icon left icon"></div><input pl="请输入短信验证码" class="left content user-sms" onfocus="check()"></label>
                            <div class="right label-parent">
                                <div class="sms-code weui-btn  weui-btn_mini" onclick="getMessage()">获取</div>
                            </div>
                            <div class="right-code sms"></div>
                        </li>
                        <li class="three-line li-border">
                            <label><div class="city-icon left icon"></div><input id='userResult' placeholder="请选择区域" class="city left user-city" readonly ></label>
                            <div id="showPicker" class="right choose-city  right-code">
                                <div class="city-code"></div>
                            </div>
                        </li>
                        <li class="error-m">
                            <div class="error-content"></div>
                        </li>
                        <li class="registered-btn">
                            <div class="btn h-btn" id="btn"><a>注册</a></div>
                        </li>
                    </ul>
                </form>
            </div>  
        </div>
    </div>
<script type="text/javascript">
	 var path="<%=path%>";
	 var yanzhengma="";  
    // 刷新图片  
    function changeImg() {
    	$(".sms").removeClass("sms-wrap");
        $(".sms-code").css("background","#dedede");
        var imgSrc = $("#imgObj");  
        var src = imgSrc.attr("src");  
        imgSrc.attr("src", changeUrl(src));
    }  
    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳  
    function changeUrl(url) {  
        var timestamp = (new Date()).valueOf();  
        var index = url.indexOf("?",url);  
        if (index > 0) {
            url = url.substring(0, index); 
        }  
        if ((url.indexOf("&") >= 0)) {  
            url = url + "×tamp=" + timestamp;  
        } else {  
            url = url + "?timestamp=" + timestamp;  
        }  
        return url;  
    } 
    
    var phoneFlag = false;
    function checkphone(){
    	var pattern = /^1[34578]\d{9}$/;
    	var phone =$(".user-number").val();
    	if(phone=="请输入手机"){
    		phoneFlag=false;
    	}else if(!pattern.test($(".user-number").val())){
    		changeImg();
    		layer.msg("手机号码错误"); 
    		phoneFlag=false;
    	}else{
    		$.ajax({
    		    url : path+"/user/checkPhone.html",
   	            data: {
   	            	phone:phone,           
   	            },
   	            type : "POST",
   	            datatype : "json",
   	            async: false,
   	            success : function(datas) {
   	              var json =eval("(" + datas + ")") 	
    	          if(json.msg=="手机号码已注册"){
    	        	  changeImg();
    	        	  layer.msg(json.msg);
    	        	  phoneFlag=false;
    	          } else{
    	        	  phoneFlag=true;   	        	  
    	          } 	
    	        }
    		});
    	}
    }
    
    var yanFlag=false;
    function checkyanzhengma(){
    	var code=$(".user-yan").val();
    	if(code=="请输入验证码"){
    		yanFlag=false;
    	 }else{
         $.ajax({
            url : path+"/user/checkCode.html",
            data: {
            	code:code,           
            },
            type : "GET",
            datatype : "json",
            async: false,
            success : function(datas) {
              var json =eval("(" + datas + ")") 
              if(json.msg==1){
            	  layer.msg(json.data);
            	  changeImg();
            	  yanFlag=false;
              }else {  
            	  yanFlag=true;
              }          
            }
         });
       }
     }
        
  function check(){
     if(timeFlag){
       checkphone();
       checkyanzhengma();
       if(phoneFlag && yanFlag){
   		   $(".sms").addClass("sms-wrap");
   		   $(".sms-code").css("background","#fedf44"); 
    	   }
       }
    }
    
    var flag = true;
    var timeFlag = true;
    function getMessage(){
         $(this).css("background","#dedede");
         if(flag && timeFlag){
             flag=false;
             timeFlag=false;
             $.ajax({
	               url : path+"/interface/sms.html",
	               data: {
	                   mobile:$(".user-number").val(),           
	               },
	               type : "GET",
	               datatype : "json",
	               async: false,
	               success : function(datas) {
	                 var json =eval("(" + datas + ")");
	                 flag=true; 
	                 if(json.msg=="1"){
	                     yanzhengma=json.data;                 
	                 }else if(json.msg=="2"){
	                    changeImg();
	                    layer.msg(json.data);                   
	                }
	              }
              });
              n = 60;
              var time = setInterval(getTime,1000)
              function getTime() {
                  n--;
                  $(".sms-code").text(n + "s");
                  if(n < 0) {
                      timeFlag=true;
                      yanzhengma="";
                      changeImg();
                      $(".sms").removeClass("sms-wrap");
                      clearInterval(time);
                      $(".sms-code").text("获取");
                  }
              }
          } 
     } 
</script>
</body>
</html>
